<template>
  <div>
    <!-- 图片列表 -->
    <div class="card-box">
      <div class="w">
        <!-- 筛选 -->
        <div class="screen clearfix">
          <div class="price-swap">
            <ul class="price-screen clearfix">
              <li :class="activeIndex===o?'currentColor':''"
                  @click="handleSort(o)"
                  v-for="(i,o) in goodsSortLabel"
                  :key="o">{{i.title}}</li>
            </ul>
          </div>
          <div class="inputBox">
            <input type="text"
                   placeholder="价格"
                   v-model="min" /><span>-</span>
            <input type="text"
                   placeholder="价格"
                   v-model="max" />
            <el-button type="primary"
                       size="mini"
                       class="sure"
                       @click="serchGoods">确定</el-button>
          </div>
        </div>
        <!-- 图片列表 -->
        <el-card>
          <ul class="card-lis">
            <li v-for="(item,index) in allGoodsList"
                :key="index">
              <img v-lazy="item.productImageBig"
                   alt="" />
              <p class="title">{{item.productName}}</p>
              <p class="detail">{{item.subTitle}}</p>
              <p class="price">￥ {{item.salePrice}}</p>
              <show-cart class="showCart"
                         style="display: none"
                         :productId="item.productId"></show-cart>
            </li>
          </ul>
        </el-card>

        <!-- 分页功能 -->
        <div class="pagination-swap">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[20,10,5]"
                         :page-size="100"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </div>
      <footer-item></footer-item>
    </div>
  </div>
</template>
<script>
import ShowCart from '../../components/showCart'
import FooterItem from '../../components/common/footer'
export default {
  components: {
    ShowCart,
    FooterItem
  },
  created() {
    this.getAllGoods()
  },
  data() {
    return {
      // 总数据
      allGoodsList: [],
      // 当前页
      currentPage: 1,
      // 当前页显示的条数
      pageSize: 20,
      // 总数量
      total: 0,
      // 默认排序方式
      sort: 0,
      // 最大Price
      max: '',
      // 最小Price
      min: '',
      goodsSortLabel: [
        { title: '综合排序' },
        { title: '价格从低到高' },
        { title: '价格从高到低' }
      ],
      activeIndex: 0
    }
  },
  methods: {
    // 获取全部商品数据
    async getAllGoods() {
      const res = await this.$http.get(
        `/api/goods/allGoods?page=${this.currentPage}&size=${this.pageSize}&sort=${this.sort}&priceGt=${this.min}&priceLte=${this.max}`
      )
      if (res.status === 200) {
        this.allGoodsList = res.data.data
        this.total = res.data.total
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getAllGoods()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getAllGoods()
    },
    // 过滤价格
    handleSort(o) {
      this.activeIndex = o
      // 排序更新数据
      switch (o) {
        case 0:
          // 综合排序
          this.sort = ''
          this.getAllGoods()
          break
        case 1:
          // 正序
          this.sort = 1
          this.getAllGoods()
          break
        case 2:
          // 倒叙
          this.sort = -1
          this.getAllGoods()
          break
        default:
          break
      }
    },
    serchGoods() {
      this.getAllGoods()
    }
  }
}
</script>

<style lang="less" scoped>
.card-box {
  .screen {
    height: 60px;
    line-height: 60px;
    width: 100%;
    overflow: hidden;

    .price-swap {
      float: left;
      margin-right: 30px;

      .price-screen {
        .currentColor {
          color: blueviolet;
        }

        li {
          float: left;
          margin-left: 15px;
          font-size: 12px;
          height: 60px;
          cursor: pointer;
        }
      }
    }

    .inputBox {
      float: left;
      overflow: hidden;
      display: flex;
      align-items: center;

      input {
        width: 80px;
        height: 30px;
        background-color: transparent;
        outline: none;
        border: 1px solid #999;
        text-align: center;
        border-radius: 20px;
      }

      span {
        color: black;
        font-size: 30px;
        padding: 0 10px;
      }

      .sure {
        margin-left: 10px;
      }
    }
  }

  .card-lis {
    li {
      width: 25%;
      height: 430px;
      border-right: 1px solid #ccc;
      float: left;
      text-align: center;
      position: relative;
      transition: all 0.3s;
      border-top: 1px solid #ccc;
      overflow: hidden;
      z-index: 99;
      cursor: pointer;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.3);

        .showCart {
          display: block !important;
        }

        .price {
          display: none;
        }
      }

      img {
        height: 206px;
        width: 206px;
        display: block;
        margin: 40px auto;
      }

      .title {
        font-size: 16px;
        color: #424242;
      }

      .detail {
        font-size: 12px;
        color: #d0d0d0;
        margin: 15px 0 35px 0;
      }

      .price {
        font-size: 18px;
        color: red;
        font-weight: 550;
      }

      &:nth-child(4) {
        border-right: none;
      }
    }
  }
  // 分页
  .pagination-swap {
    margin: 30px 0;
    float: right;
  }
}
</style>
